<template>
	<button class="but" :id="id" :class="ggclass" :data-id="dId" :style="[styles]" @click="onTap"
		@touchstart="touchstart" @touchend="touchend" :open-type="openType">
		<c-loading v-if="loading" :loading="loading" size="30rpx" style="margin-right: 10rpx;"></c-loading>
		<slot></slot>
	</button>
</template>

<script>
	let timeout = null
	import {
		colorLuminance
	} from '../ways/color.js'
	export default {
		name: "c-btn",
		props: {
			fontSize: {
				type: String,
				default: ''
			},
			loading: {
				type: Boolean,
				default: false
			},
			width: {
				type: String,
				default: "",
			},
			height: {
				type: String,
				default: "",
			},
			ggclass: {
				type: String,
				default: "",
			},
			delayed: {
				type: Number,
				default: 200,
			},
			color: {
				type: String,
				default: "",
			},
			background: {
				type: String,
				default: "main",
			},
			boxShadow: {
				type: String,
				default: "",
			},
			radius: {
				type: String,
				default: "",
			},
			disabled: {
				type: Boolean,
				default: false,
			},
			border: {
				type: String,
				default: "",
			},
			padding: {
				type: String,
				default: "",
			},
			isOpenPattern: {
				type: Boolean,
				default: false
			},
			openType: {
				type: String,
				default: "",
			},
			id: {
				type: String,
				default: "",
			},
			dId: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				oldBackground: '',
				oldColor: ''
			};
		},
		computed: {
			styles() {
				let params = {
					background: this.backs,
					width: this.$rpxunit(this.width),
					height: this.$rpxunit(this.height),
					borderRadius: this.borderRadius.split(' ').map(v => this.$rpxunit(v)).join(' '),
					padding: this.padding.split(' ').map(v => this.$rpxunit(v)).join(' '),
					color: this.colors,
					boxShadow: this.boxShadow,
					fontSize: this.$rpxunit(this.fontSizes),
					border: this.border
				}
				return params
			},
			fontSizes() {
				return this.fontSize || this.$btnStyle.fontSize
			},
			borderRadius() {
				return this.radius || this.$btnStyle.radius
			},
			colors: {
				get() {
					if (this.disabled) return '#D0D0D0'
					if (this.oldColor) {
						return this.oldColor
					} else {
						return this.$color[this.color] || this.color || this.$btnStyle.color || '#FFF'
					}
				},
				set(val) {
					return this.oldColor = val
				}
			},
			backs: {
				get() {
					// if (this.disabled) return this.colorLuminance(this.$color[this.background] || this.background, -0.2)
					if (this.disabled) return colorLuminance('#D0D0D0', 0.8)
					if (this.oldBackground) {
						return this.oldBackground
					} else {
						return this.$color[this.background] || this.background  || this.$btnStyle.background || '#D0D0D0'
					}
				},
				set(val) {
					this.oldBackground = val
				}
			},
			touchstartBack() {
				return colorLuminance(this.backs, 0.4)
			},
			touchestartColor() {
				return colorLuminance(this.colors, 0.4)
			}
		},
		methods: {
			// 手指按下
			touchstart(e) {
				this.backs = this.touchstartBack
				this.colors = this.touchestartColor
				this.$emit('touchstart', e)
			},
			// 手指松开
			touchend(e) {
				this.backs = this.$color[this.background] || this.background;
				this.colors = this.$color[this.color] || this.color
				this.$emit('touchend', e)
			},
			onTap(event) {
				if(this.loading) return
				if (this.disabled) return
				this.debounce(() => {
					this.$emit("click", event);
				}, this.delayed)
			},


			/**
			 * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
			 *
			 * @param {Function} func 要执行的回调函数
			 * @param {Number} wait 延时的时间
			 * @param {Boolean} immediate 是否立即执行
			 * @return null
			 */
			debounce(func, wait = 500, immediate = true) {
				if (timeout !== null) clearTimeout(timeout)
				// 建议按钮使用立即执行，输入框使用延时执行
				if (immediate) {
					const callNow = !timeout
					timeout = setTimeout(() => {
						timeout = null
					}, wait)
					if (callNow) typeof func === 'function' && func()
				} else {
					timeout = setTimeout(() => {
						typeof func === 'function' && func()
					}, wait)
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.but {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 25rpx;
		height: 80rpx;
		user-select: none;
		font-size: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		&::after {
			border: none;
		}
	}

	// .but:active {
	// 	background-color: #000000 !important;
	// 	color: #fff !important;
	// }
</style>